<template>
  <div>
    <el-form ref="item" :rules="rules" :model="item" label-width="80px">
      <el-row>
        <el-col :span="24" style="text-align: right">
          <el-button
            v-if="index != 0"
            @click="deleteCandidatesEdus"
            type="text"
            style="margin-bottom: 10px; color: #fb575e"
            >移除</el-button
          >
        </el-col>
        <el-col :span="8">
          <el-form-item label="省" prop="province">
            <el-select
              v-model="item.province"
              @change="provinceFun"
              placeholder="请选择"
            >
              <el-option
                v-for="item in provinceData"
                :key="item.id"
                :label="item.value"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="市" prop="city">
            <el-select
              v-model="item.city"
              placeholder="请选择"
              :no-data-text="cityText"
              @change="cityFun"
            >
              <el-option
                v-for="item in cityData"
                :key="item.id"
                :label="item.value"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="区" prop="area">
            <el-select
              v-model="item.area"
              @change="areaFun"
              placeholder="请选择"
              :no-data-text="areaText"
            >
              <el-option
                v-for="item in areaData"
                :key="item.id"
                :label="item.value"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { getDistrict } from "../../assets/js/api";
export default {
  name: "DistrictAssembly",
  props: ["item", "index"],
  data() {
    return {
      provinceData: [], //省
      cityData: [], //市
      areaData: [], //区
      cityText: "请先选择省",
      areaText: "请先选择市",
      rules: {
        province: [{ required: true, message: "请选择省", trigger: "blur" }],
        city: [{ required: true, message: "请选择市", trigger: "blur" }],
        area: [{ required: true, message: "请选择区", trigger: "blur" }],
      },
    };
  },
  created() {
    this.provinceSelect(1);
    let itemIf = JSON.stringify(this.item) == "{}";
    if (itemIf == false) {
      this.citySelect(this.item.province);
      this.areaSelect(this.item.city);
    } else {
      this.item.province = "";
      this.item.city = "";
      this.item.area = "";
    }
  },
  methods: {
    // 获取省数据
    provinceSelect(val) {
      getDistrict(val).then((res) => {
        if (res.code == 200) {
          this.provinceData = res.data;
        }
      });
    },
    // 获取选择省的id
    provinceFun(val) {
      this.item.city = "";
      this.item.area = "";
      this.citySelect(val);
    },
    // 获取市数据
    citySelect(val) {
      getDistrict(val).then((res) => {
        if (res.code == 200) {
          this.cityData = res.data;
          if (this.cityData.length == 0) {
            this.cityText = "暂无数据";
            this.areaText = "暂无数据";
          }
        }
      });
    },
    // 获取选择市的id
    cityFun(val) {
      this.item.area = "";
      this.areaSelect(val);
    },
    areaSelect(val) {
      getDistrict(val).then((res) => {
        if (res.code == 200) {
          this.areaData = res.data;
          if (this.areaData.length == 0) {
            this.areaText = "暂无数据";
          }
        }
      });
    },
    areaFun() {
      this.$forceUpdate();
    },
    deleteCandidatesEdus() {
      this.$emit("deleteIndex", this.index);
    },
  },
};
</script>
<style scoped type="less">
.el-form {
  border: 1px darkgray solid;
  padding: 20px 0 40px 0;
  margin-bottom: 20px;
}
::v-deep .el-form-item {
  margin: 0;
}
</style>